<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Learning Log</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/font/bootstrap-icons.css">
    <link rel="stylesheet" href="/static/css/style.css">
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a href="#" class="navbar-brand">Learning Log</a>
        <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <div class="navbar-nav">
                <a href="/" class="nav-item nav-link active"><i class="bi-house-fill"></i> Home</a>
                <a href="/admin/" class="nav-item nav-link"><i class="bi-shield-fill"></i> BackStage</a>
                <a href="/topics/" class="nav-item nav-link"><i class="bi-cursor-fill"></i> Topics</a>
            </div>
            {% if user.is_authenticated %}
                <form id="searchForm" class="navbar-nav pc-search ms-auto" action="" role="search">
                    <input id="search" type="search" placeholder="Search..." aria-label="Search">
                    <i class="bi-search iconfont"></i>
                </form>
            {% endif %}
            <div class="navbar-nav ms-auto">
                {% if user.is_authenticated %}
                    <span class="navbar-text mx-2">
                        <i class="bi-person-circle"></i> {{ user.username }}
                    </span>
                    <a href="{% url 'users:logout' %}" class="nav-item nav-link">Logout</a>
                {% else %}
                    <a href="{% url 'users:login' %}" class="nav-item nav-link">Login</a>
                    <a href="{% url 'users:register' %}" class="nav-item nav-link">Register</a>
                {% endif %}
            </div>
        </div>
    </div>
</nav>
<div role="main" class="container">
    <div class="pt-5 pb-2  mb-2">
        {% block page_header %}{% endblock %}
    </div>
    <div>
        {% block  content %}{% endblock %}
    </div>
</div>
{% include 'alert.html' %}
</body>
<script>
    function getCookie(name) {
        let cookies = document.cookie.split('; ');
        for (let i = 0; i < cookies.length; i++) {
            let cookie = cookies[i].split('=');
            if (cookie[0] === name) {
                return cookie[1];
            }
        }
        return "";
    }
</script>
</html>